<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enhanced Network Connection</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .network-container {
            position: relative;
            width: 600px;
            height: 400px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }

        .node {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 2;
            transition: all 0.3s ease;
        }

        .node:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .node-1 {
            background: linear-gradient(135deg, #3498db, #2980b9);
            left: 180px;
            top: 30px;
        }

        .node-2 {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            left: 80px;
            top: 280px;
        }

        .connection {
            position: absolute;
            background: rgba(79, 172, 254, 0.7);
            height: 3px;
            transform-origin: 0 0;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .connection:hover {
            background: rgba(79, 172, 254, 1);
            height: 5px;
            box-shadow: 0 0 10px rgba(79, 172, 254, 0.8);
        }

        .traffic-value {
            position: absolute;
            font-size: 0.8rem;
            background: rgba(0, 0, 0, 0.7);
            padding: 4px 8px;
            border-radius: 4px;
            color: #4ade80;
            transform: translate(-50%, -50%);
            z-index: 3;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .traffic-value:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .info-panel {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
            border-radius: 8px;
            max-width: 300px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .info-panel h3 {
            margin-bottom: 10px;
            color: #3498db;
        }

        .controls {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        button {
            background: rgba(52, 152, 219, 0.8);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background: rgba(52, 152, 219, 1);
            transform: translateY(-2px);
        }

        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }

        .pulse {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="network-container">
        <div class="node node-1">S1</div>
        <div class="node node-2">L1</div>

        <div class="connection" id="conn-s1-l1" style="width: 243.23px; left: 215.75px; top: 59px; transform: rotate(116.328deg);"></div>
        <div class="traffic-value pulse" id="traffic-s1-l1" style="left: 161.812px; top: 168px;">354 Mbps</div>

        <div class="info-panel">
            <h3>连接信息</h3>
            <p><strong>源设备:</strong> 交换机 S1</p>
            <p><strong>目标设备:</strong> 路由器 L1</p>
            <p><strong>当前流量:</strong> 354 Mbps</p>
            <p><strong>状态:</strong> <span style="color: #4ade80;">正常</span></p>
        </div>

        <div class="controls">
            <button id="refreshBtn">刷新流量</button>
            <button id="toggleAnimation">切换动画</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const connection = document.getElementById('conn-s1-l1');
            const trafficValue = document.getElementById('traffic-s1-l1');
            const refreshBtn = document.getElementById('refreshBtn');
            const toggleAnimation = document.getElementById('toggleAnimation');

            // 模拟流量更新
            refreshBtn.addEventListener('click', function() {
                const newTraffic = Math.floor(Math.random() * 500) + 100;
                trafficValue.textContent = `${newTraffic} Mbps`;

                // 根据流量值改变颜色
                if (newTraffic > 400) {
                    trafficValue.style.color = '#f39c12'; // 橙色警告
                } else if (newTraffic > 300) {
                    trafficValue.style.color = '#4ade80'; // 绿色正常
                } else {
                    trafficValue.style.color = '#3498db'; // 蓝色低流量
                }
            });

            // 切换动画
            toggleAnimation.addEventListener('click', function() {
                trafficValue.classList.toggle('pulse');

                if (trafficValue.classList.contains('pulse')) {
                    this.textContent = '关闭动画';
                } else {
                    this.textContent = '开启动画';
                }
            });

            // 连接线悬停效果
            connection.addEventListener('mouseenter', function() {
                trafficValue.style.transform = 'translate(-50%, -50%) scale(1.2)';
            });

            connection.addEventListener('mouseleave', function() {
                trafficValue.style.transform = 'translate(-50%, -50%) scale(1)';
            });
        });
    </script>
</body>
</html>